<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'
import { uploadFile } from '@/utils/uploader'
import { Plus } from '@element-plus/icons-vue'
import ImageCard from './widgets/ImageCard.vue'
import { getOcrEnterpriseInfo, getOcrIdCardInfo } from '@/api/interface/common/ocr'

interface Props {
  defaultUrl?: any
  showTip?: boolean
  tipContent?: string
  toOcr?: boolean
  toOcrType?: number
  disabled?: boolean
  limitFileSize?: number
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'image-change', imageUrl: string, res?: any): void
}>()

const fullscreenLoading = ref(false)

// 以下代码为单选用
const imgUrl = ref(props.defaultUrl || '')
watch(
  () => props.defaultUrl,
  (newVal) => {
    imgUrl.value = newVal
  }
)

// 上传文件之前
const beforeUpload = (file: any) => {
  const limitFileSize = props.limitFileSize
  // 如果有限制文件大小传过来
  if (limitFileSize) {
    const isLt1M = file.size / 1024 / 1024 > limitFileSize
    if (isLt1M) {
      ElMessage.error(`上传图片大小不能超过 ${limitFileSize}MB!`)
      return false
    }
  }
}

// 上传文件
const uploadImg = (params: any) => {
  fullscreenLoading.value = true
  if (!props.toOcr) {
    let limitSize: undefined | number = void 0
    if (props.limitFileSize || props.limitFileSize === 0) {
      limitSize = 1024 * 1024 * props.limitFileSize
    }
    uploadFile(params, limitSize)
      .then((res: any) => {
        imgUrl.value = res.imgUrl
        emit('image-change', imgUrl.value, res)
      })
      .finally(() => {
        fullscreenLoading.value = false
      })
  } else {
    if (props.toOcrType === 1) {
      // 企业
      getOcrEnterpriseInfo(params.file)
        .then((res: any) => {
          imgUrl.value = res.fileInfo.imgUrl
          emit('image-change', imgUrl.value, res)
        })
        .finally(() => {
          fullscreenLoading.value = false
        })
    } else if (props.toOcrType === 2) {
      // 个人
      getOcrIdCardInfo(params.file)
        .then((res: any) => {
          imgUrl.value = res.fileList[0].imgUrl
          emit('image-change', imgUrl.value, res)
        })
        .finally(() => {
          fullscreenLoading.value = false
        })
    } else {
      fullscreenLoading.value = false
    }
  }
}

const imageRemove = () => {
  imgUrl.value = ''
  emit('image-change', imgUrl.value)
}
</script>

<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <el-upload
      v-if="!imgUrl"
      action="#"
      accept="image/jpeg,image/png"
      list-type="picture-card"
      :show-file-list="false"
      :http-request="uploadImg"
      :disabled="props.disabled"
      :before-upload="beforeUpload"
    >
      <el-icon>
        <Plus />
      </el-icon>
      <template v-if="props.showTip" #tip>
        <div class="upload-tip">{{ props.tipContent }}</div>
      </template>
    </el-upload>
    <div v-else>
      <ImageCard :img-url="imgUrl" :disabled="props.disabled" @image-remove="imageRemove"></ImageCard>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.upload-tip {
  font-size: 12px;
  color: rgba(154, 154, 156, 0.5);
}
</style>
